<template>
  <el-cascader
    :value="value"
    placeholder="请输入地区"
    :options="options"
    filterable
    change-on-select
    clearable
    @change="handleInput"
  />
</template>

<script>
import { areas } from '../api/app'

export default {
  name: 'AreaSelect',
  props: {
    value: {
      type: [String, Array],
      required: true
    }
  },
  data() {
    return {
      options: []
    }
  },
  mounted() {
    areas().then(data => {
      this.options = data
    })
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped>

</style>
